<template>
  <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
  <view>
    <view class="uni-common-mt">
      <view class="uni-form-item uni-column">
        <view class="title">可自动聚焦的input</view>
        <input class="uni-input" focus placeholder="自动获得焦点" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">键盘右下角按钮显示为搜索</view>
        <input
          class="uni-input"
          confirm-type="search"
          placeholder="键盘右下角按钮显示为搜索"
        />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制最大输入长度的input</view>
        <input
          class="uni-input"
          maxlength="10"
          placeholder="最大输入长度为10"
        />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">实时获取输入值：{{ inputValue }}</view>
        <input
          class="uni-input"
          @input="onKeyInput"
          placeholder="输入同步到view中"
        />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制输入的input</view>
        <input
          class="uni-input"
          @input="replaceInput"
          v-model="changeValue"
          placeholder="连续的两个1会变成2"
        />
      </view>
      <!-- #ifndef MP-BAIDU -->
      <view class="uni-form-item uni-column">
        <view class="title">控制键盘的input</view>
        <input
          class="uni-input"
          ref="input1"
          @input="hideKeyboard"
          placeholder="输入123自动收起键盘"
        />
      </view>
      <!-- #endif -->
      <view class="uni-form-item uni-column">
        <view class="title">数字输入的input</view>
        <input
          class="uni-input"
          type="number"
          placeholder="这是一个数字输入框"
        />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">密码输入的input</view>
        <input
          class="uni-input"
          password
          type="text"
          placeholder="这是一个密码输入框"
        />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">带小数点的input</view>
        <input
          class="uni-input"
          type="digit"
          placeholder="带小数点的数字键盘"
        />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">身份证输入的input</view>
        <input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制占位符颜色的input</view>
        <input
          class="uni-input"
          placeholder-style="color:#F76260"
          placeholder="占位符字体是红色的"
        />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title"
          ><text class="uni-form-item__title">带清除按钮的输入框</text></view
        >
        <view class="uni-input-wrapper">
          <input
            class="uni-input"
            placeholder="带清除按钮的输入框"
            :value="inputClearValue"
            @input="clearInput"
          />
          <text class="uni-icon" v-if="showClearIcon" @click="clearIcon"
            >&#xe434;</text
          >
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">
          <text class="uni-form-item__title">可查看密码的输入框</text>
        </view>
        <view class="uni-input-wrapper uni-row uni-width">
          <input
            class="uni-input"
            placeholder="请输入密码"
            :password="showPassword"
          />
          <uni-icons
            class="uni-icon"
            :class="[!showPassword ? 'uni-eye-active' : '']"
            @click="changePassword"
            type="eye"
            size="30"
          ></uni-icons>
          <!-- <text
            class="uni-icon"
            :class="[!showPassword ? 'uni-eye-active' : '']"
            @click="changePassword"
            >&#xe568;</text
          > -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: "input",
        focus: false,
        inputValue: "",
        showClearIcon: false,
        inputClearValue: "",
        changeValue: "",
        showPassword: true,
      };
    },
    methods: {
      onKeyInput: function (event) {
        this.inputValue = event.detail.value;
      },
      replaceInput: function (event) {
        var value = event.detail.value;
        if (value === "11") {
          this.changeValue = "2";
        }
      },
      hideKeyboard: function (event) {
        if (event.detail.value === "123") {
          uni.hideKeyboard();
        }
      },
      clearInput: function (event) {
        this.inputClearValue = event.detail.value;
        if (event.detail.value.length > 0) {
          this.showClearIcon = true;
        } else {
          this.showClearIcon = false;
        }
      },
      clearIcon: function () {
        this.inputClearValue = "";
        this.showClearIcon = false;
      },
      changePassword: function () {
        this.showPassword = !this.showPassword;
      },
    },
  };
</script>

<style>
  .uni-icon {
    font-family: uniicons;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: #999;
  }
  .uni-eye-active {
    color: #007aff;
  }
  .uni-width{
        max-width: 20%;
  }
  .uni-input {
        width: 100%;
  }
  .uni-common-mt {
        margin-left: 50rpx;
  }
</style>
